﻿<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    @Scripts.Render("~/Resource/js/fe.head.js")
</head>

<body>
    <div id="app" v-cloak>
        <el-container class="list_pagecontainer">
            <el-aside width="200px">
                <div>
                    <common-tree :tree-data="treeData" :tree-body-height="treeHeight" v-on:tree-node-click="nodeClick">
                    </common-tree>
                </div>
            </el-aside>
            <el-main>
                <el-container class="list_pagecontainer">
                    <el-header>
                        <el-row>
                            <el-col :span="24">
                                <div class="list_searchcontainer">
                                    登录名：
                                    <el-input placeholder="请输入登录名" v-model="LoginID" class="list_searchinput">
                                    </el-input>
                                    姓名：
                                    <el-input placeholder="请输入姓名" v-model="DisplayName" class="list_searchinput">
                                    </el-input>
                                    <el-checkbox v-model="SearchInAll">所有人员</el-checkbox>
                                    <el-button type="primary" v-on:click="bindGrid" icon="el-icon-search">搜索</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-header>
                    <el-main>
                        <common-table :data="tableData" :page-Index="pageIndex" :page-Size="pageSize" :total="total"
                            :table-Height="tableHeight" :show-Delete="false" v-on:on-load="bindGrid"
                            v-on:handle-edit="edit" v-on:on-pageindexchange="pageIndexChange" ref="table">
                            <template slot="column">
                                <el-table-column prop="DisplayName" header-align="center" align="left" label="姓名"
                                    width="100">
                                </el-table-column>

                                <el-table-column v-for="(role, index) in roleList" :key="index" align="center">
                                    <template slot="header" slot-scope="scope">
                                        {{role.RoleName}}
                                    </template>
                                    <template slot-scope="scope">
                                        <el-checkbox v-model="scope.row.RoleList[index].IsCheck"></el-checkbox>
                                    </template>
                                </el-table-column>
                            </template>
                        </common-table>
                    </el-main>
                    <el-footer>
                        <el-row>
                            <el-col :span="24">
                                <div class="list_opcontainer">
                                    <el-button type="primary" v-on:click="batchSave">保存修改</el-button>

                                </div>
                            </el-col>
                        </el-row>
                    </el-footer>
                </el-container>
            </el-main>
        </el-container>
    </div>
</body>
@Scripts.Render("~/Resource/js/fe.foot.js")
@Scripts.Render("~/Resource/component/tree/index.js")

</html>

<script>
    var treeUrl = GetRootPath() + "Frame/OU/Tree"
    var tableUrl = GetRootPath() + "Frame/User/FindRelationList"
    var batchSaveUrl = GetRootPath() + "Frame/Role/OperateBatchSaveRelation"
    var pageData = {
        //data
        tableData: [],
        treeData: [],
        roleList: [],
        //page
        pageIndex: 1,
        pageSize: 10,
        total: 0,
        //search
        LoginID: "",
        DisplayName: "",
        //css
        tableHeight: 0,
        treeHeight: 0,
        //otherparams
        OUGuid: 'Top',
        SearchInAll: false
    };
    new Vue({
        el: '#app',
        data: pageData,
        mounted: function () {
            bindTree();
            pageData.tableHeight = CaculateTableHeight();
            pageData.treeHeight = CaculatWindowHeight();
        },
        methods: {
            pageIndexChange: function (val) {
                this.pageIndex = val
            },
            bindGrid: function () {
                bindGrid();
            },
            edit: function (index, row) {
                OpenTopDialog('relationedit', '设置权限', 'Frame/Role/RelationEdit?RowGuid=' + row.RowGuid, 600, 800,
                    bindGrid)
            },

            nodeClick: function (data, checked, node) {
                pageData.OUGuid = data.id
                bindGrid();
            },
            batchSave: function () {
                var data = {
                    UserList: JSON.stringify(pageData.tableData)
                }
                JsonAjaxPost(batchSaveUrl, JSON.stringify(data), function (data, status) {
                    if (data.code == 0) {
                        OpenSuccess('提示', '保存成功！', bindGrid)
                    } else {
                        OpenFail('提示', '保存失败！')
                    }

                })
            }


        }
    })

    function bindGrid() {
        var data = {
            PageIndex: pageData.pageIndex,
            PageSize: pageData.pageSize,
            LoginID: pageData.LoginID,
            DisplayName: pageData.DisplayName,
            OUGuid: pageData.OUGuid,
            SearchInAll: pageData.SearchInAll
        }
        JsonAjaxPost(tableUrl, JSON.stringify(data), function (data, status) {
            data.data.forEach(element => {
                element.RoleList = JSON.parse(element.RoleList)
            });
            Vue.set(pageData, "tableData", data.data);
            Vue.set(pageData, "total", data.total)
            Vue.set(pageData, "roleList", data.data[0].RoleList);

        })
    }

    function bindTree() {
        var data = {

        }
        JsonAjaxPost(treeUrl, JSON.stringify(data), function (data, status) {
            Vue.set(pageData, "treeData", data.tree);
        })
    }
</script>